<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>I1</title>
    <script>
        window.onload = function () {
            getAllListItem();
            findAllHtmlSpanInOneSection();
            findListItem();
            getActiveLinkContent();

            function getAllListItem() {
                // 返回页面中所有li标签
                var a = document.getElementsByTagName("li");
                for (var i = 0; i < a.length; i++) {
                    console.log(a[i]);
                }
            }

            function findAllHtmlSpanInOneSection(sectionId) {
                // 返回某个section下所有span中内容为HTML的span标签
                var b = document.getElementsByTagName("span");
                for (var i = 0; i < b.length; i++) {
                    if (b[i].innerHTML == "HTML") {
                        console.log(b[i]);
                    }
                }
            }

            function findListItem(sectionId, spanCont) {
                // 返回某个section下，所有所包含span内容为spanCont的LI标签

                var c = document.getElementsByTagName("span");
                for (var i = 0; i < c.length; i++) {
                    if (c[i].innerHTML == "spanCont") {
                        console.log(c[i].parentNode);
                    }
                }
            }

            function getActiveLinkContent(sectionId) {
                // 返回某个section下，class为active的链接中包含的文字内容
                var d = document.getElementsByClassName("active");
                for (var i = 0; i < d.length; i++) {
                    console.log(d[i].innerHTML);
                }
            }

        }
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="news-top" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>JS</span><a class="active" href="">Some Link2</a></li>
                    <li><span>CSS</span><a href="">Some Link3</a></li>
                    <li><span>spanCont</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
        <div id="news-normal" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>spanCont</span><a href="">Some Link2</a></li>
                    <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
                    <li><span>CSS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
    </div>
</body>




</html>